<template>
    <div class="login-page">
        <!--<TopComponent></TopComponent>-->
        <div class="login-main">
            <h1 class="login-title">欢迎登录</h1>
            <div class="login-form">
                <div class="form-item">
                    <span class="name">国籍：</span>
                    <select name="nationCode" placeholder="请选择" class="input">
                        <option value="86">中国 86</option>
                        <option value="852">中国香港 852</option>
                        <option value="886">中国台湾 886</option>
                        <option value="853">中国澳门 883</option>
                        <option value="65">新加坡 65</option>
                        <option value="60"> 马来西亚 60</option>
                        <option value="84">越南 84</option>
                        <option value="82">韩国 82</option>
                        <option value="234">尼日利亚 234</option>
                        <option value="27">南非 27</option>
                    </select>
                </div>
                <div class="form-item">
                    <span class="name">手机：</span>
                    <input type="text" placeholder="请输入手机号" class="input" v-model="mobile">
                   <span class="error-tip" style="display: none" id="mobile"></span>
                </div>
                <div class="form-item">
                    <span class="name">密码：</span>
                    <input type="password" placeholder="请输入登录密码" class="input" v-model="password">
                    <span class="error-tip" style="display: none" id="password"></span>
                </div>
                <div class="links">
                    <a class="forget-link" @click="changeRoute('/forget')">忘记密码</a>
                </div>
                <div class="form-btn" @click="loginRoute()">登录</div>
                <div class="no-count">
                    没有账号？
                    <span class="signup-link" @click="changeRoute('/register')">立即注册</span>
                </div>
            </div>
        </div>
        <Toast :msg="msg" v-if="this.msg!=''" :class="opacity" @toast="square"></Toast>
    </div>
</template>

<script>
    import $ from 'jquery';
    import {site,key} from '../../assets/js/site.js'
    import md5 from 'md5';
    import sha1 from 'sha1';
    import Toast from '../../element/toast'
    export default {
        name: 'login',
        components: {Toast},
        data(){
            return{
                mobile: '',
                password: '',
                version: '1.2',
                regxphone: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
                code: '',
                msg: ''
            }
        },
        mounted() {
            var th = this;
            setTimeout(function () {
                th.plusinit();
            }, 200);
        },
        computed: {
            opacity () {
                return {
                    opacity: this.msg != '',
                }
            }
        },
        methods:{
            square (v) {
                this.msg = v
            },
            plusinit(){
                var th = this;
                var info = {version: this.version};
                $.ajax({
                    type: "POST",
                    url: 'http://' + site + '/index/index/getVersion',
                    data: info,
                    dataType: "json",
                    complete: function (xhr, status) {
                        // plus.nativeUI.closeWaiting();
                    },
                    success: function (data, status) {
                        th.code = data.code;
                        if (data.code != "0") {
                            th.download(data.code);
                        }
                    },
                    error(status, error) {
                        if (error) {
                            th.msg = th.$t('m.tips.error');
                        }
                    },
                    // beforeSend: function () {
                    //     plus.nativeUI.showWaiting(th.$t('m.version.start'), {verticalAlign: "center"});
                    // }
                })
            },
            download(code) {
                var th = this;
                var tip_word = code == "1" ? '当前版本过低,请下载最新版本' : '有新版本可用,建议更新';
                plus.nativeUI.alert(tip_word, '版本更新');

            },
            loginRoute(){
                $("#mobile").css('display','none')
                $("#password").css('display','none')
                if(this.mobile === ''){
                    this.msg = '请输入手机号码'
                    return
                }else if(!this.regxphone.test(this.mobile)){
                    this.msg = '手机号码格式不正确'
                    return
                }
                if(this.password === ''){
                    this.msg = '请输入密码'
                    return
                }
                if (this.code != "2") {
                    var th = this;
                    var info = {
                        user: th.mobile,
                        pwd: md5(th.password),
                        version: this.version,
                        token: sha1(th.mobile +
                            md5(th.password) +
                            th.version + key)
                    };
                    $.ajax({
                        type: "POST",
                        url: "http://" + site + "/index/Login/login",
                        data: info,
                        dataType: "json",
                        complete: function (xhr, status) {
                        },
                        success: function (data, status) {
                            if (status == "success") {
                                if(data.code =='1'){
                                    localStorage.setItem("uid", data.data.uid);
                                    localStorage.setItem("phone", data.data.phone);
                                    th.$router.push({path: "/wallet"});
                                }else{
                                    // $("#password").css('display','block')
                                    // $("#password").html(data.msg)
                                    th.msg = data.msg;
                                }
                            } else {
                                th.msg = data.msg;
                            }
                        },
                        error(status, error) {
                            if (error) {
                                th.msg = '系统错误';
                            }
                        }
                    })
                } else {
                    this.msg = '当前版本过低,请下载最新版本';
                }
            }
        },
    }
</script>

<style lang="scss">
    .toastcover{
        position: absolute;
        top: 6rem;
        left: 50%;
        transform:translateX(-50%);
        animation:opcity-animation 1.5s ease-in-out 1;
    }
    .toast{
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        color:#fff;
        height:count(30rem);
        padding-left:count(10rem);
        padding-right:count(10rem);
        border-radius: count(5rem);
        background:rgba(0,0,0,.6);
    }
    .login-page {
        min-height: 100%;
        background: url(../../assets/img/bg.png);
        background-size: 100% 100%;
    }
    .login-main{
        width: 5.4rem;
        height: 8rem;
        position: absolute;
        top: calc(50% - 4rem);
        left: calc(50% - 2.7rem);
        .login-title{
            font-size: 0.48rem;
            color: #fff;
            text-align: center;
            font-weight: 400;
        }
        .login-form{
            background-color: #fff;
            width: 5.4rem;
            height: 6.4rem;
            margin: 0.48rem auto;
            border-radius: 0.2rem;
            padding: 0.4rem 0.6rem 0.56rem;
            font-size: 28px;
            color: #435069;
            .form-item{
                position: relative;
                border-bottom: 0.02rem solid #e5e5e5;
                margin-top: 0.4rem;
                white-space: nowrap;
                .name{
                    font-size: 0.28rem;
                }
                .input{
                    border: none;
                    outline: none;
                    font-size: 0.28rem;
                    width: 3rem;
                    background-color: transparent!important;
                    -webkit-appearance: none;
                }
                .error-tip{
                    display: block;
                    position: absolute;
                    font-size: 0.24rem;
                    color: #e22828;
                    bottom: -0.4rem;
                }
            }
            .links{
                color: #3f3fe4;
                position: relative;
                font-size: 0.26rem;
                .forget-link{
                    position: absolute;
                    right: 0;
                    text-decoration: none;
                    color: inherit;
                }
            }
            .form-btn{
                 width: 3rem;
                 height: 0.6rem;
                 line-height: 0.6rem;
                 background-color: #e60816;
                 color: #fff;
                 font-size: 0.26rem;
                 border-radius: 0.3rem;
                 text-align: center;
                 margin: 0 auto;
                 margin-top: 1.2rem;
             }
            .no-count{
                color: #999;
                font-size: 0.26rem;
                text-align: center;
                margin-top: 0.15rem;
                .signup-link{
                    color: #3f3fe4;
                }
            }
        }
    }
</style>
